<template>
	<div>
		<div class="container">
			<div class="toolbar">
				<a-form ref="searchRef" :model="searchState" @finish="current=1;loading=true;initData()">
					<a-row :gutter="20">
						<a-col :span="24">
							<a-form-item label="状态">
								<a-radio-group v-model:value="searchState.ship_status" @change="current=1;loading=true;initData()">
									<a-radio-button v-for="option of shipStatusList" :key="option.value" :value="option.value">{{ option.label }}</a-radio-button>
								</a-radio-group>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="20">
						<a-col :span="8">
							<a-form-item label="选择项目">
								<a-select v-model:value="searchState.project_id" :show-search="true" placeholder="请选择项目" :options="projectOptions" option-filter-prop="label" allow-clear></a-select>
							</a-form-item>
						</a-col>
						<!--						<a-col :span="8">-->
						<!--							<a-form-item label="采购单号">-->
						<!--								<a-input v-model:value="searchState.purchase_order_code" placeholder="请输入" allow-clear></a-input>-->
						<!--							</a-form-item>-->
						<!--						</a-col>-->
						<a-col :span="6">
							<a-form-item label="派遣单">
								<a-input v-model:value="searchState.code" placeholder="请输入" allow-clear></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item label="选择供应商" name="supplier_id">
								<a-select v-model:value="searchState.supplier_id" allow-clear style="width:200px" :show-search="true" placeholder="请选择供应商" :options="userList" option-filter-prop="label"></a-select>
							</a-form-item>
						</a-col>
						<a-col :span="4">
							<a-form-item>
								<a-space>
									<a-button type="primary" html-type="submit">
										<search-outlined />搜索
									</a-button>
								</a-space>
							</a-form-item>
						</a-col>
					</a-row>
				</a-form>
			</div>

			<div class="mt-2">
				<a-table v-if="!loading" :columns="columns" :scroll="tableScroll" row-key="id" children-column-name="children" :default-expand-all-rows="false" :data-source="orderSource" :pagination="pagination" :loading="loading" @change="initData">
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'ys_status'">
							<a-tag v-if="record.ys_status === 1" color="default">未验收</a-tag>
							<a-tag v-else-if="record.ys_status === 2 && record.ys_exceed === 0" color="green">正常验收</a-tag>
							<a-tag v-else color="red">超量验收</a-tag>
						</template>
						<template v-if="column.key === 'operation'">
							<a-space v-if="userInfo.is_supplier === 1">
								<a-button type="link" @click="handleDetail(record)">
									<right-outlined />查看
								</a-button>
								<a-button v-if="record.ship_status === 1" type="link" @click="handleCheck(record)">
									<edit-outlined />派遣
								</a-button>
							</a-space>

							<a-space v-else>
								<a-button v-permission="256" type="link" @click="handleDetail(record)">
									<right-outlined />查看
								</a-button>
								<a-button v-if="record.ship_status === 1" v-permission="255" type="link" @click="handleCheck(record)">
									<edit-outlined />派遣
								</a-button>
							</a-space>
						</template>
					</template>
				</a-table>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";

import { userStore } from "../store";
const { info: userInfo } = userStore();

import dayjs from "dayjs";

import { SearchOutlined, EditOutlined, RightOutlined } from "@ant-design/icons-vue";

import { post } from "../utils";

import { usePagination } from "vue-request";

const route = useRoute();
const router = useRouter();
const query = route.query;
const userList = ref([]);
post("user", { is_supplier: 1, page_size: 1000 }).then(({ data }) => {
	userList.value = data.map(d => {
		return {
			value: d.id,
			label: d.company_name || d.mobile
		};
	});
});

const handleDetail = record => {
	router.push(`/supply/order/pq/info/${record.id}?type=${record.purchaseOrder.type}`);
};

const searchRef = ref();
const searchState = reactive({
	ship_status: ""
});
const projectOptions = ref([]);
post("department/projects?type=3").then(({ data }) => {
	projectOptions.value = data.map(d => {
		return {
			value: d.id,
			label: d.name
		};
	});
});
const typeOptions = [
	{
		value: "purchase",
		label: "物资周转料采购"
	},
	{
		value: "shangtong",
		label: "商砼采购"
	},
	{
		value: "machineapply",
		label: "机械租赁"
	},
	{
		value: "auxiliary",
		label: "辅助材料采购"
	},
	{
		value: "a_few_employ",
		label: "零星用工"
	}
];
const shipStatusList = [
	{
		value: "",
		label: "全部"
	},
	{
		value: 1,
		label: "待派遣"
	},
	{
		value: 2,
		label: "已派遣"
	}
];
const columns = [
	{
		title: "序号",
		dataIndex: "id",
		key: "id",
		width: 80,
		align: "left",
		fixed: "left"
	},
	{
		title: "项目名称",
		dataIndex: "project",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.name || "";
		}
	},
	// {
	// 	title: "采购单",
	// 	dataIndex: "purchaseOrder",
	// 	sorter: false,
	// 	width: 150,
	// 	ellipsis: true,
	// 	customRender: ({ text, record, index, column }) => {
	// 		return text?.code;
	// 	}
	// },
	{
		title: "类型",
		dataIndex: "purchaseOrder",
		sorter: false,
		width: 120,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			const typeItem = typeOptions.find(item => item.value === text?.type);
			return typeItem?.label;
		}
	},
	{
		title: "供应商",
		dataIndex: "supplier",
		sorter: false,
		width: 150,
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text && text.company_name;
		}
	},
	{
		title: "送达地址",
		dataIndex: "deliver_address",
		width: 120,
		align: "center"
	},
	{
		title: "送达时间",
		dataIndex: "deliver_time",
		width: 180,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text && dayjs(text).format("YYYY-MM-DD HH:mm:ss");
		}
	},
	{
		title: "现场联系人",
		dataIndex: "receiver",
		align: "center",
		width: 120
	},
	{
		title: "联系电话",
		dataIndex: "receiver_tel",
		width: 120,
		align: "center"
	},
	{
		title: "状态",
		dataIndex: "ship_status",
		sorter: false,
		width: 100,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return !text || text === 1 ? "待派遣" : text === 2 ? "已派遣" : "未知";
		}
	},
	// {
	// 	title: "验收状态",
	// 	dataIndex: "ys_status",
	// 	sorter: false,
	// 	width: 100,
	// 	align: "center",
	// },
	{
		title: "派遣单",
		dataIndex: "code",
		width: 150,
		align: "center"
	},
	{
		title: "最后更新时间",
		dataIndex: "update_time",
		width: 180,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
		}
	},
	{
		title: "操作",
		key: "operation",
		sorter: false,
		fixed: "right",
		width: 150,
		align: "center"
	}
];
const tableScroll = computed(() => ({ x: document.documentElement.clientWidth - 650 }));

const { data, loading, run, current, pageSize, total } = usePagination(params => post("supplyOrder", { ...params, ...searchState, ys_type: 7 }), {
	defaultParams: [
		{
			page_size: 10
		}
	],
	pagination: {
		currentKey: "page",
		pageSizeKey: "page_size",
		totalKey: "total"
	}
});

const orderSource = computed(() =>
	(data.value?.data || []).map(d => {
		if (d.children?.length === 0) delete d.children;
		return d;
	})
);

const pagination = computed(() => ({
	total: total.value,
	current: current.value,
	pageSize: pageSize.value
}));

const initData = (pag, filters, sorter) => {
	pag = Object.assign(
		{
			current: current.value,
			pageSize: pageSize.value
		},
		pag || {}
	);
	filters = { ...filters, ...searchState };
	const query = {};
	if (pag?.pageSize) {
		query['page_size'] = pag?.pageSize;
	}
	if (pag?.current) {
		query['page'] = pag?.current;
	}
	router.replace({ query: {
		...query,
		...filters
	}})
	run({
		page_size: pag?.pageSize,
		page: pag?.current,
		sort_field: sorter?.field,
		sort_order: sorter?.order,
		...filters
	});
};

if (query) {
	if (query.ship_status) searchState.ship_status = parseInt(query.ship_status);
	if (query.project_id) searchState.project_id = parseInt(query.project_id);
	if (query.supplier_id) searchState.supplier_id = parseInt(query.supplier_id);
	if (query.purchase_order_code) searchState.purchase_order_code = query.purchase_order_code;
	if (query.code) searchState.code = query.code;
	const pag = {};
	if (query.page) {
		pag['current'] = parseInt(query.page);
	}
	if (query.pageSize) {
		pag['pageSize'] = parseInt(query.page_size);
	}
	initData(pag);
}

const handleCheck = ({ id }) => {
	router.push(`/supply/order/pq/check/${id}`);
};
</script>
<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}
</style>
